<template>
	<el-table ref="table" :data="columnData" row-key="prop" style="width: 100%" border>
		<el-table-column prop="" label="排序" width="60">
			<el-tag disable-transitions class="move" style="cursor: move"
				><el-icon style="cursor: move"><el-icon-d-caret /></el-icon
			></el-tag>
		</el-table-column>
		<el-table-column prop="label" label="列名">
			<template #default="scope">
				<el-tag
					round
					disable-transitions
					:effect="scope.row.hide ? 'light' : 'dark'"
					:type="scope.row.hide ? 'info' : ''"
					>{{ scope.row.label }}</el-tag
				>
			</template>
		</el-table-column>
		<el-table-column prop="hide" label="显示" width="60">
			<template #default="scope">
				<el-switch
					v-model="scope.row.hide"
					size="small"
					:active-value="false"
					:inactive-value="true"
				/>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import Sortable from 'sortablejs'

	export default {
		emits: ['success'],
		props: {
			column: { type: Array, default: () => [] }
		},
		data() {
			return {
				columnData: this.column
			}
		},
		mounted() {
			this.rowDrop()
		},
		methods: {
			rowDrop() {
				const _this = this
				const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
				Sortable.create(tbody, {
					handle: '.move',
					animation: 200,
					ghostClass: 'ghost',
					onEnd({ newIndex, oldIndex }) {
						const tableData = _this.columnData
						const currRow = tableData.splice(oldIndex, 1)[0]
						tableData.splice(newIndex, 0, currRow)
					}
				})
			}
		}
	}
</script>
